<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="box-card">
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <zk-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        :show-index="true"
        index-text="#"
        border
        :show-row-hover="false"
      >
        <!--是否有效-->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color: lightskyblue"></i>
          <i class="el-icon-error" v-else style="color: lightcoral"></i>
        </template>
        <!--排序-->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除</el-button>
        </template>
      </zk-table>
      <!--页码-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--添加分类对话框-->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%"
      @close="addCateDialogClosed"
    >
      <el-form :rules="addCateRule" label-width="70px" :model="addCateForm" ref="addCateFormRef">
        <el-form-item label="分类名称：" prop="cat_name" label-width="93px">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：" label-width="93px">
          <!--级联选择器，props用来指定选中对象-->
          <el-cascader
            v-model="selectKeys"
            :options="parentCateList"
            :props="{ expandTrigger: 'hover',value:cascadeProps.value,label:cascadeProps.label,children:cascadeProps.children }"
            @change="parentCateChange"
            style="width: 100%"
            clearable
            :change-on-select="true"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!--编辑分类对话框-->
    <el-dialog
      title="修改用户"
      :visible.sync="editCateDialogVisible"
      width="50%"
      @close="editCateDialogClosed"
    >
      <el-form :rules="addCateRule" label-width="70px" :model="editCateForm" ref="editCateFormRef">
        <el-form-item label="分类名称：" prop="cat_name" label-width="93px">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCateInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Categories",
    data(){
      return{
        //获取商品分类的参数对象
        queryInfo:{
          type:3,
          //当前的页数
          pagenum:1,
          //当前显示数据数量
          pagesize:5
        },
        //商品分类数据列表
        cateList:[],
        //父级分类的列表
        parentCateList:[],
        //指定级联选择器配置对象
        cascadeProps:{
          value:"cat_id",
          label:"cat_name",
          children:"children"
        },
        //选中父级分类的id数组
        selectKeys:[],
        //数据总数
        total:0,
        //添加分类对话框是否弹出
        addCateDialogVisible:false,
        //编辑分类对话框是否弹出
        editCateDialogVisible:false,
        //添加分类的表单对象
        addCateForm:{
          cat_name:"",
          //父级分类的id
          cat_pid:0,
          //默认要添加的是一级分类
          cat_level:0
        },
        //编辑分类数据
        editCateForm:{},
        //表格列的表头
        columns:[
          {
            label:"分类名称",
            prop:"cat_name",
          },
          {
            label:"是否有效",
            //将当前列定义为模板列
            type: 'template',
            //表示当前列使用的模板名称
            template: 'isok'
          },
          {
            label:"排序",
            //将当前列定义为模板列
            type: 'template',
            //表示当前列使用的模板名称
            template: 'order'
          },
          {
            label:"操作",
            //将当前列定义为模板列
            type: 'template',
            //表示当前列使用的模板名称
            template: 'opt',
            minWidth: '150px'
          }
        ],
        //表单验证规则
        addCateRule: {
          cat_name: [
            {required: true, message: '请输入分类名称', trigger: 'blur'},
          ],
        }
      }
    },
    created() {
      this.getCateList();
    },
    methods:{
      //获取商品分类数据
      async getCateList(){
        const result=(await this.$http.get("categories", {params:this.queryInfo})).data;
        if(result.meta.status!==200) this.$message.error("获取商品分类失败");
        this.cateList=result.data.result;
        this.total=result.data.total;
      },
      //监听pagesize改变事件
      handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize;
        this.getCateList();
      },
      //监听页码值改变事件
      handleCurrentChange(newSize){
        this.queryInfo.pagenum=newSize;
        this.getCateList();
      },
      //添加商品对话框初始化
      async showAddCateDialog(){
        //获取父级分类的数据列表
        const result=(await this.$http.get("categories",{params:{type:2}})).data;
        if(result.meta.status!==200) return this.$message.error("获取父级分类失败");
        this.parentCateList=result.data;
        this.addCateDialogVisible=true;
      },
      //父级分类选项发生变化
      parentCateChange(){
        if(this.selectKeys.length>0){
          //父级分类的id
          this.addCateForm.cat_pid=this.selectKeys[this.selectKeys.length-1];
          //当前分类的等级
          this.addCateForm.cat_level=this.selectKeys.length;
          return
        }else {
          //父级分类的id
          this.addCateForm.cat_pid=0;
          //当前分类的等级
          this.addCateForm.cat_level=0;
        }
      },
      //点击按钮添加新的分类
      addCate(){
        //预校验
        this.$refs.addCateFormRef.validate(async valid=>{
          if(!valid) return;
          const result=(await this.$http.post("categories", this.addCateForm)).data;
          if(result.meta.status!==201) return this.$message.error("添加分类失败");
          this.$message.success("添加分类成功");
          this.getCateList();
          this.addCateDialogVisible=false;
        })
      },
      //添加分类对话框关闭时重置
      addCateDialogClosed(){
        this.$refs.addCateFormRef.resetFields();
        //父级分类的id
        this.addCateForm.cat_pid=0;
        //当前分类的等级
        this.addCateForm.cat_level=0;
        this.selectKeys=[];
      },
      //编辑查询分类数据
      async showEditCateDialog(id){
        const result=(await this.$http.get("categories/" + id)).data;
        if(result.meta.status!==200) return this.$message.error("查询用户数据失败");
        this.editCateForm=result.data;
        this.editCateDialogVisible=true;
      },
      //编辑分类对话框关闭重置对话框
      editCateDialogClosed(){
        this.$refs.editCateFormRef.resetFields();
      },
      //编辑分类数据
      editCateInfo(){
        this.$refs.editCateFormRef.validate(async valid=>{
          if(!valid) return;
          //发起修改用户数据请求
          const result=(await this.$http.put("categories/" + this.editCateForm.cat_id,
            {cat_name: this.editCateForm.cat_name})).data;
          if(result.meta.status!==200) return this.$message.error("编辑分类失败");
          this.$message.success("编辑分类成功")
          this.getCateList();
          this.editCateDialogVisible=false;
        })
      },
      //删除分类
      removeCateById(id){
        //用户确认删除，返回字符串confirm，取消删除，返回字符串cancel
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const result=(await this.$http.delete("categories/" + id)).data;
            if(result.meta.status!==200) return this.$message.error("删除分类失败");
            this.$message.success('删除成功!');
            this.getCateList();
          })
          .catch(() => {
            this.$message.info('已取消删除');
          });
      },
    }
  }
</script>

<style scoped lang="less">

</style>
